<template>
  <el-dialog :title="t('common.settings')" width="600" top="25vh" @open="onOpen" @close="close" :model-value="visible">
    <el-form label-position="top" :model="form" ref="formRef">
      <el-form-item :label="t('operator.account_name')" prop="templateName">
        <el-input v-model="form.templateName" :maxlength="maxLength.tempName"></el-input>
      </el-form-item>

      <el-form-item required prop="description">
        <template #label>
          <span class="mr-1">{{ t('cmp.page_description')}}</span>
          <el-tooltip placement="top">
            <template #content>
              <span v-html="t('flypass.description_help')">                
              </span>              
            </template>
            <svg-icon icon-class="OutlinedQuestionCircle" />
          </el-tooltip>
        </template>
        <el-input v-model="form.description" :maxlength="maxLength.description"></el-input>
      </el-form-item>

      <el-form-item :label="t('common.remark')">
        <el-input v-model="form.remark" :maxlength="maxLength.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <template #label>
          <span class="mr-1">{{ t('flypass.pass-type-identifier') }}</span>
          <el-tooltip placement="top">
            <template #content>
              <span v-html="t('flypass.pass_type_identifier_help')">                
              </span>              
            </template>
            <svg-icon icon-class="OutlinedQuestionCircle" />
          </el-tooltip>
        </template>
        <el-select v-model="form.passTypeIdentifier" class="w-full">
          <el-option v-for="item in passIndentifierList" :label="item.passTypeId" :value="item.passTypeId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <template #label>
          <span class="mr-1">{{ t('modules.pass.nfc') }}</span>
          <el-tooltip placement="top">
            <template #content>
              <span v-html="t('flypass.nfc_public_key')">                
              </span>              
            </template>
            <svg-icon icon-class="OutlinedQuestionCircle" />
          </el-tooltip>
        </template>
        <el-select v-model="form.nfcKeyId" class="w-full">
          <el-option v-for="item in nfcList" :key="item.id" :label="item.keyName" :value="item.id" />                      
        </el-select>
      </el-form-item>

      
    </el-form>
    <template #footer>    
    <div class="text-right">
      <el-button @click="close">{{ t('common.cancel') }}</el-button>
      <el-button type="primary" @click="save" :loading="buttonLoading">{{ t('page.confirm') }}</el-button>
    </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { PassIdentifier, SettingsField } from '@/api/pass/passModel'
import { usePassStore } from '@/store/modules/pass'
import { ElMessage } from '@toms/element-ui';
import type { FormInstance, FormRules } from '@toms/element-ui'
import { useI18n } from 'vue-i18n'
import { getPassTypeIdentifier } from '@/api/pass/passIdentifier';
import { storeToRefs } from 'pinia';
import { maxLength } from '@/api/topic/rules';
import { getNFCList } from '@/api/pass-generate'

const emit = defineEmits(['update:visible', 'confirm'])
defineProps(['visible'])

interface Timezone {
  areaCode: string
  deviceFlag: string
  id: number
  label: string
  labelEn: string
  labelJa: string
  labelPt: string
  labelZh: string
  timeZone: string
}

interface Language  {
  label: string,
  value: string
}
const store = usePassStore()
const { t } = useI18n({})
const timezonesList = ref<Timezone[]>([])
const languageList = ref<Language[]>([])
const nfcList = ref<any>(null)
const formRef = ref<FormInstance>(null)
const passIndentifierList = ref<PassIdentifier[]>([])
const buttonLoading = ref(false)

const formOrigin = () => ({
  timezone: '',
  defaultLanguage: '',
  description: '',
  templateName: '',
  remark: '',
  passTypeIdentifier: '',
  nfcKeyId: null
})
const form = ref<SettingsField>(formOrigin())


onMounted(() => {
  getTimezoneList()
  getLanguageList()  
})

function onOpen() {
  form.value.templateName = store.passTemplate.tempName
  form.value.passTypeIdentifier = store.passTemplate.passTypeIdentifier
  form.value.description = store.passTemplate.description
  form.value.nfcKeyId = store.passTemplate.keyId
  getIndetifierList()
  localGetNfcList()
}


function close() {
  emit('update:visible', false)
  Object.assign(form.value, formOrigin())
}

async function getTimezoneList() {
  const res = await fetch('/api/pass/timezone')
  timezonesList.value = await res.json()
}

async function getIndetifierList() {
  const { data } = await getPassTypeIdentifier()
  passIndentifierList.value = data
}

async function getLanguageList() {
  const res = await fetch('/api/pass/get-language')
  languageList.value = await res.json()
}

async function localGetNfcList() {
  const { data } = await getNFCList()
  nfcList.value = data
}


async function save() {
  await formRef.value.validate((valid) => {
    if(valid) {
      store.setTemplateName(form.value.templateName)
      store.setDescription(form.value.description)
      store.setPassTypeIndentifier(form.value.passTypeIdentifier)
      store.setNfcKeyId(form.value.nfcKeyId)
      close()
    }
  })

}
</script>

<style lang="scss" scoped></style>


